<template>
  <vxe-grid
    ref="table"
    class="table-normal"
    resizable
    show-overflow
    row-key
    keep-source
    size="small"
    border
    :data="tableData"
    :columns="columns"
    v-bind="isEdit ? vxeOptions : null"
  >
    <template #e_settleAmount="{ row }">
      <vxe-input v-model="row.settleAmount" placeholder="收款金额" clearable></vxe-input>
    </template>
    <template #d_settleAmount="{ row }">
      <span>{{ row.settleAmount }}</span>
    </template>
    <template #e_settleName="{ row }">
      <vxe-input v-model="row.settleName" placeholder="收款人" clearable></vxe-input>
    </template>
    <template #d_settleName="{ row }">
      <span>{{ row.settleName }}</span>
    </template>
    <template #e_settleTime="{ row }">
      <vxe-input v-model="row.settleTime" placeholder="日期" class="date" type="date" clearable></vxe-input>
    </template>
    <template #d_settleTime="{ row }">
      <span>{{ row.settleTime | parseTime('{y}-{m}-{d}') }}</span>
    </template>
    <template #e_remarks="{ row }">
      <vxe-input v-model="row.remarks" placeholder="备注" clearable></vxe-input>
    </template>
    <template #d_remarks="{ row }">
      <span>{{ row.remarks }}</span>
    </template>
    <template #operation="{ row }">
      <vxe-button type="text" status="danger" @click="del(row)">删除</vxe-button>
    </template>
  </vxe-grid>
</template>
<script>
import Sortable from 'sortablejs';
import XEUtils from 'xe-utils';
import VXETable from 'vxe-table';

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      vxeOptions: {
        'row-config': { isHover: true, isCurrent: true },
        'scroll-y': { enabled: false },
        'edit-config': {
          trigger: 'click',
          mode: 'row',
          showStatus: true,
          showIcon: false,
        },
      },
    };
  },
  filters: {
    formatStatus(val) {
      return val ? '启用' : '停用';
    },
    formatDetectionStd(stdList) {
      if (!stdList) return;
      return stdList.map((item) => item.dictValue).join('、');
    },
    formatDetectionDomain(val, stdList) {
      if (!val) return;
      const list = stdList.filter((item) => val.includes(item.id));
      return list.map((item) => item.dictValue).join('、');
    },
  },
  created() {},
  mounted() {
  },
  methods: {
    
    async del(row) {
      const $table = this.$refs.table;
      await $table.remove(row);
    },
    async fullValidEvent() {
      const $table = this.$refs.table;
      const errMap = await $table.fullValidate().catch((errMap) => errMap);
      if (errMap) {
        const msgList = [];
        Object.values(errMap).forEach((errList) => {
          errList.forEach((params) => {
            const { rowIndex, column, rules } = params;
            rules.forEach((rule) => {
              msgList.push(`校验错误：${rule.message}`);
            });
          });
        });
        VXETable.modal.message({
          status: 'error',
          slots: {
            default() {
              return [
                <div class="red" style="max-height: 400px;overflow: auto;">
                  {msgList.map((msg) => (
                    <div>{msg}</div>
                  ))}
                </div>,
              ];
            },
          },
        });
      } else {
        VXETable.modal.message({ status: 'success', content: '校验成功！' });
        this.$emit('submit');
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
